<template>
    <div class="wrap setting-demo">
        <div class="page-head">
            <a-breadcrumb>
                <a-breadcrumb-item>{{ $t('setting.setting.60zekdgu01o0') }}</a-breadcrumb-item>
                <a-breadcrumb-item>{{ $t('setting.setting.60zekdgu4f00') }}</a-breadcrumb-item>
            </a-breadcrumb>
        </div>
        <div class="table-scroll">
            <div class="setting-table">
                <a-form :model="form.data" :style="{ width: '820px' }" @submit="submit">
                    <a-form-item field="version" :label="$t('setting.setting.60zekdgu5jw1') + ':'">
                        {{ form.data.version }}
                    </a-form-item>
                    <a-form-item field="name" :label="$t('setting.setting.60zekdgu5jw2') + ':'"
                        :rules="[{ required: true, message: $t('setting.setting.60zekdgu4t00') }]">
                        <a-input v-model="form.data.name" :placeholder="$t('setting.setting.60zekdgu4t00')" />
                    </a-form-item>
                    <div class="logo-box">
                        <a-col :span="24">
                            <a-row :gutter="16">
                                <a-col :span="12">
                                    <a-form-item :validate-trigger="['blur']" field="logo" :label="$t('setting.setting.60zekdgu5j12')"
                                        :rules="[{ required: true, message: $t('setting.setting.60zekdgu5j13') }]">
                                        <c-upload type="image" @change="validateField('logo')"
                                            v-model="form.data.logo"></c-upload>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item :validate-trigger="['blur']" field="blackLogo" :label="$t('setting.setting.60zekdgu5j14')"
                                        :rules="[{ required: true, message: $t('setting.setting.60zekdgu5j15') }]">
                                        <c-upload type="image" @change="validateField('blackLogo')"
                                            v-model="form.data.blackLogo"></c-upload>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-col>
                    </div>
                    <a-form-item field="isOpen" :label="$t('setting.setting.60zekdgu5jw4') + ':'">
                        <a-space direction="vertical" size="mini">
                            <a-switch :checked-value="1" :unchecked-value="0" v-model="form.data.isOpen" />
                        </a-space>
                    </a-form-item>
                    <a-form-item field="uavLogSave" :label="$t('setting.setting.60zekdgu5jw5') + ':'">
                        <a-space direction="vertical" size="mini">
                            <a-input-number v-model="form.data.uavLogSave" :disabled="true"
                                :placeholder="$t('setting.setting.60zekdgu5dg0')" :default-value="10" class="input-demo"
                                :min="1" :max="100" />
                        </a-space>
                    </a-form-item>
                    <a-form-item field="uavTraceSav" :label="$t('setting.setting.60zekdgu5jw6') + ':'">
                        <a-space direction="vertical" size="mini">
                            <a-input-number v-model="form.data.uavTraceSav" :disabled="true"
                                :placeholder="$t('setting.setting.60zekdgu5dg0')" :default-value="10" class="input-demo"
                                :min="10" :max="100" />
                        </a-space>
                    </a-form-item>
                    <a-form-item field="userLogSave" :label="$t('setting.setting.60zekdgu5jw7') + ':'">
                        <a-space direction="vertical" size="mini">
                            <a-input-number v-model="form.data.userLogSave" :disabled="true"
                                :placeholder="$t('setting.setting.60zekdgu5dg0')" :default-value="10" class="input-demo"
                                :min="10" :max="100" />
                        </a-space>
                    </a-form-item>
                    <a-form-item field="email" :label="$t('setting.setting.60zekdgu5jw9') + ':'">
                        <a-input v-model="form.data.email" :placeholder="$t('setting.setting.60zekdgu5dg0')" />
                    </a-form-item>
                    <a-form-item class="setting-botton">
                        <a-button html-type="submit" type="primary" long>{{ $t('setting.setting.60zekdgu5jw0')
                            }}</a-button><br />
                    </a-form-item>
                </a-form>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { reactive } from 'vue';
import { apiSystem, apiSystemUpdata } from '@/api/visual'
const formRef = ref()
const local = useLocal()
const form = reactive({
    loading: false,
    data: {
        id: 1,
        version: '',
        name: '',
        blackLogo: '',
        logo: '',
        isOpen: 0,
        lang: '',
        mapType: '',
        tcpAddress: '',
        deviceLogSave: 0,
        deviceMsgSave: 0,
        uavLogSave: 0,
        uavTraceSav: 0,
        userLogSave: 0,
        email: ''
    }

});
const validateField = (field: string) => {
    formRef.value?.validateField(field)
}
const submit = async () => {
    const validate = await formRef.value?.validate()
    if (validate) return
    const { code } = await apiSystemUpdata({
        // id: 1,
        ...form.data
    })
    if (code != 200) return;
    getData()
    local.getSystem()
    useMessage.success()
    formRef.value?.resetFields()
}
const getData = async () => {
    formRef.value?.resetFields()
    form.loading = true
    const { code, data } = await apiSystem({ id: 1 })
    form.loading = false
    if (code != 200) return;
    form.data = data
}
onBeforeMount(() => {
    getData()
})
</script>

<style scoped lang="less">
.setting-table {
    display: flex;
    justify-content: center;
    margin-top: 120px;

    :deep(.arco-btn-primary, .arco-btn-primary[type='button'], .arco-btn-primary[type='submit']) {
        background-color: #4465b8 !important;
    }

    :deep(.arco-form-item) {
        margin-bottom: 30px;
    }

    .logo-box {
        display: flex;
        align-items: center;
        margin-left: 96px;

        .logo-name {
            color: var(--color-text-2);
            font-size: 14px;
            margin-left: 65px;
        }

        >div {
            display: flex;
            align-items: center;
        }
    }

    :deep(.arco-upload-picture-card) {
        min-width: 180px;
        margin-left: -13px;
    }
}
</style>